<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <include file="./Public/Admin/header.html" />
    <script type="text/javascript" src="__PUBLIC__js/jquery_wookmark_min.js?2013-10-15-2"></script>
    <script type="text/javascript" src="__PUBLIC__js/masonry.pkgd.min.js?2013-10-15-2"></script>
    <script type="text/javascript" src="__PUBLIC__js/jquery_imagesloaded.js?2013-10-15-2"></script>
    <style type="text/css">
        /**
       * Grid container
       */
        #tiles {
            list-style-type: none;
            /**position: relative;  Needed to ensure items are laid out relative to this container **/
            margin: 0 auto;
        }

        /**
         * Grid items
         */
        #tiles .item_news {
            width: 350px;
            margin: 10px;
        }


    </style>
</head>
<body>
<div id="main">
    <div class="container-fluid">
        <div class="row-fluid">
            <div class="span12">
                <div class="box">
                    <div class="box-title">
                        <div class="span4">
                            <h3><i class="icon-table"></i>图文素材管理</h3>
                        </div>
                        <div class="btn-group pull-right clearfix hide">
                            <form action="admin/home/replynews" method="get" class="form-horizontal" style="margin: 0px;">

                                <input type="text" id="keyword" name="keyword" value="<?php echo $keyword?>" class="input-small-z" placeholder="请输入关键词" data-rule-required="true" />
                                <button class="btn" id="btn_search">查询</button>
                            </form>
                        </div>
                    </div>
                    <div class="box-content">

                        <div class="row-fluid">
                            <div class="span12 control-group">
                                <div class="span4">
                                    <a class="btn" href="{:U('Admin/Wechat/editnew')}?action=add"><i class="icon-plus"></i>添加单图文</a>
                                    <a class="btn" href="{:U('Admin/Wechat/editnews')}?action=add"><i class="icon-plus"></i>添加多图文</a>

                                    <a class="btn " href="javascript:location.reload()"><i class="icon-refresh"></i>刷新</a>
                                </div>

                            </div>

                        </div>

                        <div class="row-fluid dataTables_wrapper">
                            <div  id="newslist">
                                <div id="tiles">
                                    <!-- These are our grid blocks -->
                                    <?php foreach($contents as $item):?>
                                    <?php $item_con=json_decode($item['content']);?>
                                    <?php if(count($item_con)==1):?>
                                    <div class="item_news">
                                        <div class="imgEdit" id="imgEdit">
                                            <div  id="item_0">
                                                <div class="caption div_caption" ><?php echo $item_con[0]->detailtitle;?></div>
                                                <div class="time"><?php echo date('Y-m-d',strtotime($item['addtime']))?></div>
                                                <div class="img">
                                                    <div class="coverImg">
                                                        <img  src="<?php echo $item_con[0]->detaillogo;?>" />
                                                    </div>
                                                </div>
                                                <div class="des"><?php echo $item_con[0]->detailintro;?></div>
                                            </div>
                                            <br />
                                            <div class="clearfix">
                                                <a href="{:U('Admin/Wechat/editnew')}?action=edit&cid=<?php echo $item['contentid'];?>" class="btn btn-primary span6" title="编辑"><i class="icon-edit"></i></a>
                                                <a href="javascript:G.ui.tips.confirm('您确定要删除此素材吗?', '{:U('Admin/Wechat/delnews')}?cid=<?php echo $item['contentid'];?>');" class="btn btn-primary span6" title="删除"><i class="icon-trash"></i></a>
                                            </div>
                                        </div>
                                    </div>
                                    <?php endif;?>
                                    <?php if(count($item_con)>1):?>
                                    <div class="item_news" >
                                        <div class="imgsEdit" id="imgsEdit">
                                            <div class="time"><?php echo date('Y-m-d',strtotime($item['addtime']))?></div>
                                            <div class="img" id="item_0">
                                                <div class="coverImg"><img src="<?php echo $item_con[0]->detaillogo;?>"/></div>
                                                <div class="caption" style=" ">
                                                    <span  class="div_caption" ><?php echo $item_con[0]->detailtitle;?> </span>
                                                </div>
                                            </div>
                                            <ul class="unstyled">
                                                <?php for($i=1;$i<count($item_con);$i++){?>
                                                <li class="item">
                                                    <div class="caption div_caption"><?php echo $item_con[$i]->detailtitle;?>  </div>
                                                    <div class="itemImg coverImg"><img src="<?php echo $item_con[$i]->detaillogo;?>"/></div>
                                                    <div class="div_content hide"></div>
                                                </li>
                                                <?php }?>
                                            </ul>
                                            <br />
                                            <div class="clearfix">
                                                <a href="{:U('Admin/Wechat/editnews')}?action=edit&cid=<?php echo $item['contentid'];?>" class="btn btn-primary span6" title="编辑"><i class="icon-edit"></i></a>
                                                <a href="javascript:G.ui.tips.confirm('您确定要删除此素材吗?', '{:U('Admin/Wechat/delnews')}?cid=<?php echo $item['contentid'];?>');" class="btn btn-primary span6" title="删除"><i class="icon-trash"></i></a>
                                            </div>
                                        </div>
                                    </div>
                                    <?php endif;?>
                                    <?php endforeach;?>



                                    <!-- End of grid blocks -->
                                </div>



                            </div>
                            <div class="row-fluid">
                                <div class="span4">
                                    <div class="dataTables_info">
                                        <if condition="$total gt 0">
                                            共{$total}条记录，当前第{$nowPage}/{$totalPages}页
                                        </if>
                                    </div>
                                </div>
                                <div class="span8">
                                    <div class="dataTables_paginate paging_full_numbers">
                                        <span>
                                            {$page}
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>


                    </div>
                </div>
            </div>

        </div>
    </div>
</div>

<script type="text/javascript">
    $(document).ready(function(){
        // Prepare layout options.
        var options = {
            autoResize: true, // This will auto-update the layout when the browser window is resized.
            container: $('#newslist'), // Optional, used for some extra CSS styling
            offset: 5, // Optional, the distance between grid items
            itemWidth: 390 // Optional, the width of a grid item
        };

        // Get a reference to your grid items.
        var handler = $('#tiles li');
        // Call the layout function.
        //handler.wookmark(options);

        // Capture clicks on grid items.
        handler.click(function(){
            // Randomize the height of the clicked item.
            //var newHeight = $('img', this).height() + Math.round(Math.random()*300+30);
            //$(this).css('height', newHeight+'px');

            // Update the layout.
            //handler.wookmark();
        });



        $('#tiles').masonry({
            // options
            itemSelector : '.item_news',
            columnWidth : 390,//一列的宽度 Integer
            isFitWidth: true,// 适应宽度
            gutterWidth :10,//列的间隙
            isResizableL:true, // 是否可调整大小
            isRTL:false//使用从右到左的布局
        })

        var $container = $('#tiles');
        $container.imagesLoaded( function(){
            $container.masonry({
                itemSelector : '.item_news',
                columnWidth : 390,//一列的宽度 Integer
                isFitWidth: true,// 适应宽度
                gutterWidth :10,//列的间隙
                isResizableL:true, // 是否可调整大小
                isRTL:false//使用从右到左的布局
            })
        })
    });
</script>
</body>
</html>
